<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/1/4 0004
  Time: 上午 10:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>线下办税渠道分析</title>
</head>
<body>
<div class="content-wrapper">
    <h3>线下办税渠道分析</h3>

    <div class="row">
        <div class="col-sm-12">
            <div class="panel panel-default">
                <div class="panel-heading"></div>
                <div class="panel-body">
                    <div id="chart1" style="height: 420px;"></div>
                    <div class="col-sm-12" style="margin: 0 auto;text-align:center;">
                        <select>
                            <option>2015年</option>
                            <option>2014年</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>


    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="panel panel-default">
                <div class="panel-heading"></div>
                <div class="panel-body">
                    <div id="chart2" style="height: 420px;"></div>

                </div>
            </div>
        </div>

        <div class="col-sm-12">
            <div class="panel panel-default">
                <div class="panel-heading"></div>
                <div class="panel-body">
                    <div id="chart3" style="height: 420px;"></div>
                    <div class="col-sm-12" style="margin: 0 auto;text-align:center;">
                        <select>
                            <option>选择税务机关</option>
                            <option>南京</option>
                            <option>苏州</option>
                        </select>
                        <select>
                            <option>选择流程类型</option>
                            <option>缴税流程</option>
                            <option>申报流程</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-12">
            <div class="panel panel-default">
                <div class="panel-heading"></div>
                <div class="panel-body">
                    <div id="chart4" style="height: 420px;"></div>

                </div>
            </div>
        </div>

        <div class="col-sm-12">
            <div class="panel panel-default">
                <div class="panel-heading"></div>
                <div class="panel-body">
                    <div id="chart5" style="height: 420px;"></div>

                </div>
            </div>
        </div>
    </div>

</div>


<script>
    //chart1


    var chartOption1 = {
        title : {
            text: '纳税人反馈分析',
            subtext: '不同纳税人的投诉情况'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:[
                '企业','企业法人','自然人'
            ]
            ,x:'right'
        },

        calculable : true,
        grid: {y: 70, y2:30, x2:20},
        xAxis : [
            {
                type : 'category',
                data : ['态度不好','等待太久','无法解决','结果不满意','其他']
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLabel:{formatter:'{value} s'}
            }
        ],
        series : [
            {
                name:'企业',
                type:'bar',
                itemStyle: {normal: {color:'rgba(193,135,143,1)', label:{show:true}}},
                data:[1541,1255,995,775, 570]
            },
            {
                name:'企业法人',
                type:'bar',
                itemStyle: {normal: {color:'rgba(181,235,152,1)', label:{show:true,textStyle:{color:'#27727B'}}}},
                data:[1300,900,705,600,456]
            },
            {
                name:'自然人',
                type:'bar',
                itemStyle: {normal: {color:'rgba(222,255,106,1)', label:{show:true,textStyle:{color:'#E87C25'}}}},
                data:[2506,2211,1608,1478,1050]
            }


        ]
    };





    var chartOption2 = {
        title : {
            text: '审批流程效率分析',
            subtext: '不同地域不同时间段响应效率'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:[
                '00:00-8:00','8:00-16:00','16:00-24:00'
            ]
            ,x:'right'
        },

        calculable : true,
        grid: {y: 70, y2:30, x2:35},
        xAxis : [
            {
                type : 'category',
                data : ['南京','无锡','常州','苏州','扬州']
            },
            {
                type : 'category',
                axisLine: {show:false},
                axisTick: {show:false},
                axisLabel: {show:false},
                splitArea: {show:false},
                splitLine: {show:false},
                data : ['最高','最高','最高','最高','最高']
            }
        ],
        yAxis : [
            {
                type : 'value',
                name:'处理时间',
                axisLabel:{formatter:'{value} s'}
            },
            {
                type : 'value',
                name : '流程数量',
                axisLabel : {
                    formatter: '{value} '
                }
            }
        ],
        series : [
            {
                name:'00:00-8:00',
                type:'bar',
                itemStyle: {normal: {color:'rgba(193,35,43,1)', label:{show:true}}},
                data:[41,155,95,75, 70]
            },
            {
                name:'8:00-16:00',
                type:'bar',
                itemStyle: {normal: {color:'rgba(181,195,52,1)', label:{show:true,textStyle:{color:'#27727B'}}}},
                data:[100,200,105,100,156]
            },
            {
                name:'16:00-24:00',
                type:'bar',
                itemStyle: {normal: {color:'rgba(252,206,16,1)', label:{show:true,textStyle:{color:'#E87C25'}}}},
                data:[506,611,608,478,450]
            },
            {
                name:'00:00-8:00',
                type:'bar',
                xAxisIndex:1,
                itemStyle: {normal: {color:'rgba(193,35,43,0.5)', label:{show:true,formatter:function(p){return p.value > 0 ? (p.value +'\n'):'';}}}},
                data:[96,224,164,124,550]
            },
            {
                name:'08:00-16:00',
                type:'bar',
                xAxisIndex:1,
                itemStyle: {normal: {color:'rgba(181,195,52,0.5)', label:{show:true}}},
                data:[491,1035,389,955,347]
            },
            {
                name:'16:00-24:00',
                type:'bar',
                xAxisIndex:1,
                itemStyle: {normal: {color:'rgba(252,206,16,0.5)', label:{show:true,formatter:function(p){return p.value > 0 ? (p.value +'+'):'';}}}},
                data:[600,1700,817,770,680]
            },
            {
                name:'流程数量',
                type:'line',
                yAxisIndex: 1,
                data:[200, 220, 330, 450, 630]
            }

        ]
    };



    var chartOption3 = {
        title : {
            text: '审批流程岗位效率分析',
            subtext: '不同岗位不同时间段响应效率'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:[
                '00:00-8:00','8:00-16:00','16:00-24:00'
            ]
            ,x:'right'
        },

        calculable : true,
        grid: {y: 70, y2:30, x2:20},
        xAxis : [
            {
                type : 'category',
                data : ['岗位1','岗位2','岗位3','岗位4','岗位5']
            },
            {
                type : 'category',
                axisLine: {show:false},
                axisTick: {show:false},
                axisLabel: {show:false},
                splitArea: {show:false},
                splitLine: {show:false},
                data : ['最高','最高','最高','最高','最高']
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLabel:{formatter:'{value} s'}
            }
        ],
        series : [
            {
                name:'00:00-8:00',
                type:'bar',
                itemStyle: {normal: {color:'rgba(193,135,43,1)', label:{show:true}}},
                data:[41,55,75,95, 120]
            },
            {
                name:'8:00-16:00',
                type:'bar',
                itemStyle: {normal: {color:'rgba(181,295,52,1)', label:{show:true,textStyle:{color:'#27727B'}}}},
                data:[100,120,145,156,176]
            },
            {
                name:'16:00-24:00',
                type:'bar',
                itemStyle: {normal: {color:'rgba(252,256,16,1)', label:{show:true,textStyle:{color:'#E87C25'}}}},
                data:[156,211,308,348,400]
            },
            {
                name:'00:00-8:00',
                type:'bar',
                xAxisIndex:1,
                itemStyle: {normal: {color:'rgba(193,135,43,0.5)', label:{show:true,formatter:function(p){return p.value > 0 ? (p.value +'\n'):'';}}}},
                data:[96,124,164,184,250]
            },
            {
                name:'08:00-16:00',
                type:'bar',
                xAxisIndex:1,
                itemStyle: {normal: {color:'rgba(181,295,52,0.5)', label:{show:true}}},
                data:[191,235,309,355,487]
            },
            {
                name:'16:00-24:00',
                type:'bar',
                xAxisIndex:1,
                itemStyle: {normal: {color:'rgba(252,256,16,0.5)', label:{show:true,formatter:function(p){return p.value > 0 ? (p.value +'+'):'';}}}},
                data:[250,300,357,410,580]
            }


        ]
    };



    var chartOption4 = {
        title : {
            text: '登录时间分布',
            subtext: ''
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:[
                '0:00-8:00','8:00-16:00','16:00-24:00'
            ]
            ,x:'right'
        },

        calculable : true,
        grid: {y: 70, y2:30, x2:20},
        xAxis : [
            {
                type : 'category',
                data : ['功能界面1','功能界面2','功能界面3','功能界面4','功能界面n']
            }
        ],
        yAxis : [
            {
                type : 'value',name:'登陆次数',
                axisLabel:{formatter:'{value} '}
            }
        ],
        series : [
            {
                name:'0:00-8:00',
                type:'bar',
                itemStyle: {normal: {color:'rgba(193,135,143,1)', label:{show:true}}},
                data:[1541,1255,995,775, 570]
            },
            {
                name:'8:00-16:00',
                type:'bar',
                itemStyle: {normal: {color:'rgba(181,235,152,1)', label:{show:true,textStyle:{color:'#27727B'}}}},
                data:[1300,900,705,600,456]
            },
            {
                name:'16:00-24:00',
                type:'bar',
                itemStyle: {normal: {color:'rgba(222,255,106,1)', label:{show:true,textStyle:{color:'#E87C25'}}}},
                data:[2506,2211,1608,1478,1050]
            }


        ]
    };


    var  chartOption5 = {
        title : {
            text: '操作错误分布',
            subtext: ''
        },
        tooltip : {
            trigger: 'axis'
        },


        calculable : true,
        grid: {y: 70, y2:30, x2:35},
        xAxis : [
            {
                type : 'category',
                data : ['功能界面1','功能界面2','功能界面3','功能界面4','功能界面n']
            }
        ],
        yAxis : [
            {
                type : 'value',
                name:'错误数',
                axisLabel:{formatter:'{value} '}
            },
            {
                type : 'value',
                name : '停留时间',
                axisLabel : {
                    formatter: '{value} s'
                }
            }
        ],
        series : [
            {

                type:'bar',
                itemStyle: {normal: { label:{show:true}}},
                data:[41,155,95,75,80]
            },
            {
                name:'流程数量',
                type:'line',
                yAxisIndex: 1,
                data:[200, 220, 330, 450, 630]
            }

        ]
    };

    require.config({
        paths: {
            echarts: '${ctx}/assets/echarts/build/dist'
        }
    });
    require(
            [
                'echarts',
                'echarts/chart/bar',
                'echarts/chart/scatter',
                'echarts/chart/pie',
                'echarts/chart/map',
                'echarts/chart/tree',
                'echarts/chart/funnel',
                'echarts/chart/gauge',
                'echarts/chart/wordCloud',
                'echarts/chart/line'

            ],
            function (ec) {
                //江苏省税务业务办理事项统计


                var chart1 = ec.init(document.getElementById('chart1'));
                chart1.setOption(chartOption1, true);


                var chart2 = ec.init(document.getElementById('chart2'));
                chart2.setOption(chartOption2, true);

                var chart3 = ec.init(document.getElementById('chart3'));
                chart3.setOption(chartOption3, true);

                var chart4 = ec.init(document.getElementById('chart4'));
                chart4.setOption(chartOption4, true);

                var chart5 = ec.init(document.getElementById('chart5'));
                chart5.setOption(chartOption5, true);


            }
    )







</script>
</body>
</html>
